<template>
  <view class="container">
    <ve-form :model="feeForm" ref="feeFormRef" :rules="rules" layout="vertical">
      <ve-card
        style="margin-bottom: 0"
        :customContentStyle="{
          padding: '32rpx 24rpx',
        }"
      >
        <div class="order-fee-item">
          <view class="add-fee-title">其他费用</view>
          <template v-if="feeForm.feeList.length > 0">
            <template v-for="(item, index) in feeForm.feeList" :key="index">
              <view class="content-title">
                <!-- feeNameId 57 车辆购置补充费  61 借调附加费-->
                <view>{{ feeNameId === 61 ? '借调附加费' : '车辆购置补充费' }}</view>
                <ve-icon name="delete_1" width="36" height="36" @click="delFeeFn(index)" />
              </view>
              <div class="order-fee-item-content">
                <ve-form-item label="收付款类型" required :prop="`feeList.${index}.costType`">
                  <ve-picker-inline v-model="item.costType" placeholder="请选择" :range="costTypeEnum" unit="arrowRight" />
                </ve-form-item>
                <ve-form-item label="金额" required unit="元" :prop="`feeList.${index}.amount`">
                  <ve-input-number v-model="item.amount" :min="0" :max="99999999.99" :precision="2" placeholder="请输入" />
                </ve-form-item>
                <ve-form-item label="备注" :borderBottom="false" labelPosition="top">
                  <ve-input v-model="item.remark" placeholder="请输入" type="textarea" />
                </ve-form-item>
              </div>
            </template>
          </template>
          <ve-button
            type="plain"
            @click="addFeeFn"
            :customStyle="{ backgroundColor: '#F3F7FF' }"
            v-if="usePermission('svmsapp:car-manage.add-fee')"
          >
            <template #icon>
              <ve-icon name="plus" width="36" height="36" />
            </template>
            添加费用
          </ve-button>
        </div>
      </ve-card>
    </ve-form>

    <ve-bottom-box>
      <ve-button type="primary" size="long" @click="submitFn">{{ btnText }}</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { addOrUpdatePurchaseFee, getAssetFeeDetail, addFee } from '@/api/asset/asset-fee'
  import { usePermission } from '@/hooks/usePermission'

  const btnText = ref('确认添加')
  // 费用相关 开始
  const feeFormRef = ref()
  const feeForm = ref<any>({
    feeList: [
      {
        costType: 1,
        remark: '',
      },
    ],
  })
  const costTypeEnum = ref([
    {
      label: '收款',
      value: 0,
    },
    {
      label: '付款',
      value: 1,
    },
  ])

  const rules = computed(() => {
    const _rules: any = {}
    feeForm.value.feeList.forEach((item: any, index: number) => {
      _rules[`feeList.${index}.costType`] = {
        required: true,
        message: '请选择',
      }
      _rules[`feeList.${index}.amount`] = {
        required: true,
        message: '请输入',
      }
    })
    return _rules
  })
  // 添加费用
  const addFeeFn = () => {
    console.log(feeForm.value, 'feeForm.value')

    feeForm.value.feeList.push({
      costType: 1,
      amount: '',
      remark: '',
    })
  }
  // 删除费用
  const delFeeFn = (index: number) => {
    feeForm.value.feeList.splice(index, 1)
  }
  // 判断数据类型 61 借调附加费  57 车辆购置费
  const feeNameId = ref(null)
  onLoad((options: any) => {
    if (options.operateType === '0') {
      btnText.value = '确认添加'
      uni.setNavigationBarTitle({
        title: '添加费用',
      })
    } else {
      btnText.value = '确认修改'
      uni.setNavigationBarTitle({
        title: '修改费用',
      })
    }
    feeForm.value.operateType = options.operateType
    feeForm.value.carId = options.carId
    feeForm.value.id = options.businesId
    feeForm.value.feeCategory = options.feeCategory
    feeForm.value.feeId = options.id
    if (options.id) {
      getAssetFeeDetail({ id: options.id, feeCategory: 5 }).then((res: any) => {
        const result = res.result
        feeNameId.value = result.feeNameId
        feeForm.value.feeList = result.feeDetailList || [
          {
            costType: 1,
            remark: '',
          },
        ]
      })
    } else {
      feeForm.value.feeList = [
        {
          costType: 1,
          remark: '',
        },
      ]
    }
  })
  // 提交
  const submitFn = () => {
    console.log(feeForm.value, 'feeForm.value')
    feeFormRef.value.validate((valid: any) => {
      if (valid) {
        //必填项校验
        save()
      } else if (feeForm.value.feeList?.length < 1) {
        //全部删除
        save()
      }
    })
  }
  const save = () => {
    // 借调附加费
    if (feeForm.value.feeCategory == 6 && feeForm.value.id) {
      addFee({
        id: feeForm.value.id,
        feeList: feeForm.value.feeList,
        feeId: feeForm.value?.feeId || '', //借调附加费需要
      }).then((res) => {
        uni
          .showToast({
            title: '添加费用成功',
          })
          .then(() => {
            uni.navigateBack()
          })
      })
    } else {
      // 车辆购置费
      addOrUpdatePurchaseFee({
        carId: feeForm.value.carId,
        feeList: feeForm.value.feeList,
        feeId: feeForm.value?.feeId || '', //借调附加费需要
        operateType: feeForm.value.operateType,
      }).then(() => {
        uni
          .showToast({
            title: '添加费用成功',
          })
          .then(() => {
            uni.navigateBack()
          })
      })
    }
  }
</script>
<style lang="less" scoped>
  .container {
    height: auto;
    min-height: 100%;
    padding: 24rpx 24rpx 48rpx;
  }

  .order-fee-item {
    .add-fee-title {
      font-size: 30rpx;
      font-weight: 400;
      color: #191c27;
      margin-bottom: 16rpx;
    }
  }
  .content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    padding: 0 24rpx;
    background: #f0f1f3;
    font-size: 30rpx;
    font-weight: 600;
    color: #191c27;

    .ve-icon-close {
      font-size: 38rpx;
      color: rgba(213, 216, 220, 1);
    }
  }
  .order-fee-item-content {
    padding: 0 24rpx;
    background: #f7f8fa;
    margin-bottom: 24rpx;
  }

  .delete-button {
    margin-bottom: 30rpx;
  }
</style>
